<template>
    <div>
      <i-table :columns="columns1" :data="data1"></i-table>
      <Page :total="pageData.total" :current="pageData.current" :page-size="pageData.size"
            show-elevator show-total @on-change="changePage">
      </Page>

    </div>
</template>

<script>
  import {blogPage,blogDetail,recommendBlog} from '@/api/blogApi';
  import {commentPage} from '@/api/commentApi';
  import {dealPageData} from "@/utils/myPageUtil";
  import {Button} from "iview";
    export default {
      name: "commentAdmin",
      //用于刷新页面
      inject: ['reload'],
      data () {
        return {
          detailDig:false, //详情窗口
          commentArr:[], //评论数组
          split1: 0.8,
          blogObj:{  //博客对象
            id:0,
            blogContent:'',
            likeCount:0,
            author:'',
            createTime:'',
            collectCount:0,
          },
          pageData:{
            total:0,
            current:1,
            size:10,
            data:[]
          },
          columns1: [
            {
              title: '评论人',
              key: 'commentPerson',
            },
            {
              title: '评论的博客',
              key: 'title'
            },
            {
              title: '博客简介',
              key:"summary",
            },
            {
              title: '博客缩图',
              key: 'picUrl',
              render: (h, params) => {
                return h('div', [
                  h('img', {
                    attrs: {
                      src: params.row.picUrl
                    },
                    style: {
                      width: '80px',
                      height: '60px'
                    }
                  }),
                ]);
              }
            },
            {
              title: '评论内容',
              key: 'content'
            },
            {
              title: '被评论人',
              key: 'toPerson'
            },
            {
              title: '评论来源',
              key: 'source'
            },
            {
              title: '状态',
              key: 'status',
              render: (h, params) => {
                if (params.row.status == 1) {
                  return h('span', '正常');
                }else {
                  return h('span', '禁用');
                }
              }
            },
            {
              title: '操作',
              key: 'action',
              width: 150,
              fixed: 'right',
              align: 'center',
              render: (h, params) => {
                return h("div", [//渲染一个div标签
                  h(
                    Button,//在div标签下渲染一个iview组件
                    {
                      props: {//传递参数
                        type: "primary",
                        size: "small"
                      },
                      style: {//设置样式
                        marginRight: "5px"
                      },
                      on: {//监听$emit事件
                        click: () => {
                          this.blogDetail(params.row.id);
                        }
                      }
                    },
                    "详情"
                  ),
                  h(
                    Button,
                    {
                      props: {
                        type: "error",
                        size: "small"
                      },
                      on: {
                        click: () => {
                          this.recommendBlog(params.row.id);
                        }
                      }
                    },
                    "推荐"
                  ),
                ]);
              }
            }
          ],
          data1: []
        }
      },
      methods:{
        changePage(index){
          blogPage(index,this.pageData.size).then(res => {
            if(res.data.code == 200){
              //处理分页
              this.pageData = dealPageData(res.data);
              this.data1 = this.pageData.data;
            }
          })
        },
        recommendBlog(id){
          //博客推荐
          recommendBlog(id).then(res => {
            if(res.data.code == 200){
              this.$Message.info("推荐博客成功");
            }
          });
        },
        blogDetail(id){
          //查询博客详情
          blogDetail(id).then(res => {
            if(res.data.code == 200){
              let obj =  res.data.data.blog;
              this.blogObj.blogContent = obj.content;
              this.blogObj.id = obj.id;
              this.blogObj.createTime = obj.createTime;
              this.blogObj.author = obj.author;
              this.blogObj.likeCount = obj.likeCount;
              this.blogObj.collectCount = obj.collectCount;

               res.data.data.commentList.forEach(item => {
                 let obj = {};
                 obj.id = item.id;
                 obj.title = item.userName + "         " + item.commentTimeStr;
                 obj.source = item.source;
                 obj.likeCount = item.likeCount;
                 obj.content = item.content;
                 obj.avatar = item.avatar;
                 this.commentArr.push(obj);
               })
            }
            console
          });
          this.detailDig = true;
        },
        ok () {
          //刷新当前页面,保证数据表单数据清空
          this.reload();
        },
        cancel () {
          //刷新当前页面,保证数据表单数据清空
          this.reload();
        },
        showMore(id){
          //查看更多的评论
          this.$Message.info(id);
        }
      },
      created(){
          //加载分页数据
        commentPage(this.pageData.current,this.pageData.size,{}).then(res => {
          if(res.data.code == 200){
            //处理分页
            this.pageData = dealPageData(res.data);
            this.data1 = this.pageData.data;
          }
        })
      }

    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .article-content
    width auto
    @media only screen and (max-width: 768px)
      margin 5px 5px 10px 5px
    @media screen and (min-width: 768px)
      margin 10px 10px 20px 10px
    @media screen and (min-width: 992px)
      margin 15px 35px 50px 35px
    @media screen and (min-width: 1200px)
      width 1200px
      margin 15px auto 0
    .layout-left, .layout-right
      padding 0
      @media only screen and (max-width: 768px)
        padding 0
      @media screen and (min-width: 768px)
        padding 0
      @media screen and (min-width: 992px)
        padding 0 10px
      @media screen and (min-width: 1200px)
        padding 0 10px

</style>
